<template>
  <div class="approval-list-container">
    <div class="filter-section">
      <el-select v-model="selectedType" placeholder="申请类型">
        <el-option label="全部" value=""></el-option>
        <el-option label="Redis" value="Redis"></el-option>
        <el-option label="积分" value="积分"></el-option>
      </el-select>
      <el-input v-model="userId" placeholder="用户ID"></el-input>
      <el-button type="primary" @click="searchApproves">搜索</el-button>
    </div>
    <div class="table-section">
      <el-table :data="filteredApproves" style="width: 100%">
        <el-table-column prop="id" label="编号" width="80"></el-table-column>
        <el-table-column prop="title" label="申请标题" width="180"></el-table-column>
        <el-table-column prop="description" label="申请说明" width="200"></el-table-column>
        <el-table-column prop="approveUserId" label="申请人" width="120"></el-table-column>
        <el-table-column label="申请状态" width="120">
          <template slot-scope="scope">
            <span :class="getStatusClass(scope.row.status)">{{ getStatusText(scope.row.status) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="当前进度" width="180">
          <template slot-scope="scope">
            <div class="progress-container">
              <!--加上这个属性可以让进度条根据状态改变颜色 :status="getProgressStatus(scope.row.status)"-->
              <el-progress :percentage="getProgressPercentage(scope.row.approvalChainLevel, scope.row.maxLevel)" :show-text="false" :stroke-width="12" class="progress-bar"></el-progress>
              <div class="progress-text">{{ getProgressPercentage(scope.row.approvalChainLevel, scope.row.maxLevel) }}%</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="lastApprover" label="最近审批人" width="120"></el-table-column>
        <el-table-column prop="lastApprovedTime" label="最近审批时间" width="160"></el-table-column>
        <el-table-column prop="awaitApprover" label="待审批人" width="120"></el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="160"></el-table-column>
        <el-table-column label="操作" width="180" fixed="right">
          <template slot-scope="scope">
            <el-button size="mini" @click="viewDetail(scope.row.id)">详情</el-button>
            <el-button size="mini" type="danger" @click="discardApprove(scope.row.id)">废弃</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import requestUtil from '../../network/request'

export default {
  name: 'ApproveList',
  data() {
    return {
      selectedType: '',
      userId: '',
      approves: [],
      filteredApproves: [],
    };
  },
  mounted() {
    this.fetchApproveList();
  },
  methods: {
    fetchApproveList() {
      requestUtil.post('/approve/list', {}).then(res => {
        if (res.code === '0') {
          this.approves = res.result.approveItemInfos;
          this.filteredApproves = res.result.approveItemInfos;
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    searchApproves() {
      this.filteredApproves = this.approves.filter(approve => {
        return (this.selectedType === '' || approve.title.includes(this.selectedType)) &&
               (this.userId === '' || approve.approveUserId.includes(this.userId));
      });
    },
    getStatusClass(status) {
      switch (status) {
        case '1':
          return 'status-approved';
        case '2':
          return 'status-rejected';
        case '3':
          return 'status-pending';
        default:
          return 'status-pending';
      }
    },
    getStatusText(status) {
      switch (status) {
        case '1':
          return '通过';
        case '2':
          return '拒绝';
        case '3':
          return '申请中';
        default:
          return '未知状态';
      }
    },
    getProgressPercentage(current, max) {
      if (max === 0) return 0;
      return Math.round((current / max) * 100);
    },
    /*根据状态值设置进度条颜色，可以不选择*/
    getProgressStatus(status) {
      switch (status) {
        case '1':
          return 'success'; // 通过
        case '2':
          return 'exception'; // 拒绝
        case '3':
          return 'warning'; // 申请中
        default:
          return ''; // 默认状态
      }
    },
    viewDetail(id) {
      this.$router.push({ path: '/approve/approveDetail', query: {id: id}, });
    },
    discardApprove(id) {
      // 这里可以添加废弃逻辑
      console.log('废弃申请:', id);
    },
  },
};
</script>

<style scoped>
.approval-list-container {
  padding: 20px;
}

.filter-section {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 20px;
}

.filter-section .el-select {
  margin-right: 10px;
}

.filter-section .el-input {
  margin-right: 10px;
  width: 200px;
}

.filter-section .el-button {
  margin-right: 10px;
}

.table-section {
  width: 100%;
}

.status-approved {
  color: #28a745;
}

.status-rejected {
  color: #dc3545;
}

.status-pending {
  color: #ffc107;
}

.progress-container {
  display: flex;
  align-items: center;
}

.progress-bar {
  flex: 1;
  margin-right: 10px;
}

.progress-text {
  font-size: 14px;
  color: #606266;
}
</style>
